<template>
    <view class="content">
        <view class="price_detail clearfix">
          <view class="price_detail_title">{{Number(orderStatus)!==5 ?'订单金额':'价格明细'}}</view>
          <view class="price_detail_content" :class="{'price_detail_content_noBorder':Number(orderStatus)==5}">
            <!-- 价格总额 -->
            <view class="price_detail_box all">
              <view class="price_detail_name">商品总额</view>
              <view class="price_detail_num num">￥{{ orderInfo.totalAmount }}</view>
            </view>
            <!-- 运费--实物商品有 -->
            <view class="price_detail_box yunfei" v-if="Number(orderInfo.orderType) == 0">
              <view class="price_detail_name">运费</view>
              <view class="price_detail_num num" v-if="orderInfo.shippingType===2 && Number(orderInfo.freight)>0">￥{{ orderInfo.freight }}</view>
              <view class="price_detail_text" v-else>{{orderInfo.freight}}</view>
            </view>
            <!-- 优惠活动 -->
            <template v-if="orderInfo.fullDiscount">
                <view class="price_detail_box couponAct" v-if="orderInfo.fullDiscount && orderInfo.fullDiscount.fullDiscountMap && Object.keys(orderInfo.fullDiscount.fullDiscountMap).length > 0">
                    <view class="price_detail_top">
                        <view class="price_detail_name">优惠活动</view>
                        <view class="price_detail_tips" v-for="(value, key) in orderInfo.fullDiscount.fullDiscountMap" :key="key">
                          <!-- {{Object.values(fullDiscount?.fullDiscountMap)}} -->
                            {{value}}
                        </view>
                    </view>
                    <view class="price_detail_num num_o">- ￥{{orderInfo.fullDiscount.discountAmount}}</view>
                </view>
                <view class="price_detail_box couponAct" v-else-if="orderInfo.fullDiscount && !orderInfo.fullDiscount.fullDiscountMap && orderInfo.fullDiscount.fullDiscountDesc">
                    <view class="price_detail_top">
                        <view class="price_detail_name">优惠活动</view>
                        <view class="price_detail_tips"> {{ orderInfo.fullDiscount.fullDiscountDesc }}  </view>
                    </view>
                    <view class="price_detail_num num_o">- ￥{{orderInfo.fullDiscount.discountAmount}}</view>
                </view>
            </template>
            <!-- 优惠券 -->
            <view class="price_detail_box coupon" v-if="orderInfo.coupon">
              <view class="price_detail_top">
                <view class="price_detail_name">优惠券</view>
                <view class="price_detail_tips">{{ orderInfo.coupon.couponName }}</view>
              </view>
              <view class="price_detail_num num_o">-￥{{ orderInfo.coupon.couponAmount }}</view>
            </view>
          </view>
          <!-- 金额  订单信息 订单取消后不显示-->
          <template v-if="Number(orderStatus)!==5">
              <view class="payment">
                <view class="payment_top">
                  <view class="price_detail_name">{{Number(orderStatus) == 4 ? '应付金额':'实付金额'}}</view>
                  <view class="paidAmount">
                    <span v-if="orderInfo.payAmount && Number(orderInfo.payAmount) !== 0">¥{{ orderInfo.payAmount }} </span><span
                      v-if="orderInfo.payPoints && Number(orderInfo.payPoints) !== 0"><img
                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png"
                        alt="" style="height: 13px; width: 13px;margin-left: 8px; margin-right: 6px;" /> {{ orderInfo.payPoints }} </span>
                  </view>
                </view>
              </view>
              <!-- 订单信息  订单取消后不显示-->
              <view class="order_Detail">
                <view class="price_detail_title">订单信息</view>
                <view class="order_Detail_content">
                  <view class="order_Detail_box">
                    <view class="price_detail_name">订单编号</view>
                    <view class="order_detail_num">
                      <view class="code">{{ orderInfo.orderNo }}</view>
                      <view class="" style=" color: #888888; margin: 0px 10px;">|</view>
                      <view class="copy" @tap="copytext(orderInfo.orderNo)">复制</view>
                    </view>
                  </view>
                  <view class="order_Detail_box">
                    <view class="price_detail_name">下单时间</view>
                    <view class="code">{{ orderInfo.orderTime }}</view>
                  </view>
                </view>
              </view>
          </template>
        </view>
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'

export default {
    props: {
        orderInfo: {
            type: Object,
            default: () => {}
        },
        orderStatus: {
            type: String,
            default: () => ''
        },
        currentIndex: {
            type: Number,
            default: () => 0
        },
    },
    data () {
        return {

        }
    },

    computed: {
    },


    watch: {

    },
    onLoad () {

    },
    onReady () {

    },

    methods: {
        copytext (text) {
            // if (text !== null) {
            //   this.copyNum(text)
            // } else {
            //   this.$message.warning('内容为空，复制失败！')
            // }
            var that = this
            wx.setClipboardData({
                data: text,
                success: function (res) {
                    wx.showToast({
                        title: '复制成功',
                        icon: 'success',
                        duration: 2000
                    })
                }
            })
        },

  },

}
</script>
<style lang="scss" scoped>
// 价格明细
.price_detail {
  padding: 24px 24px 108px 24px;
  background-color: #ffffff;
  margin-top: 10px;

  .price_detail_content {
    border-bottom: 2rpx solid #f9f9f9;
    padding-bottom: 20px;
  }
  .price_detail_content_noBorder {
    border-bottom: none;
    padding-bottom: 0px;
  }

  .price_detail_title {
    font-size: 40rpx;
    text-align: left;
    color: #111111;
  }

  .price_detail_box {
    margin-top: 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .num {
    font-size: 28rpx;
    text-align: right;
    color: #111111;
  }

  .num_o {
    font-size: 28rpx;
    text-align: right;
    color: #FF6203;
  }

  // 实付金额
  .payment {
    padding: 24px 0px;

  }

}

// 很多地方字体 颜色公用
.price_detail_name {
  font-size: 28rpx;
  line-height: 28rpx;
  text-align: left;
  color: #111111;
}

.price_detail_tips {
  font-size: 24rpx;
  text-align: left;
  color: #666666;
  margin-top: 5px;
}

.checked-img {
  height: 16px;
  width: 16px;
}

.payment_top {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .paidAmount {
    font-size: 32rpx;
    color: #111111;
    line-height: 32rpx;
  }
}

.order_Detail {
  padding-bottom: 100px;
}

// 订单编号
.order_Detail_box {
  margin-top: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.order_detail_num {
  display: flex;
  align-items: center;
}
.price_detail_text {
  font-size: 28rpx;
  line-height: 28rpx;
  color: #111111;
}

.code {
  font-size: 24rpx;
  text-align: right;
  color: #888888;
  line-height: 24rpx;
}

.copy {
  font-size: 24rpx;
  text-align: right;
  color: #111111;
  line-height: 24rpx;
}
</style>

